<template>
  <el-dialog class="flex-center" title="预测模型配置" :visible.sync="dialogVisible" width="80%" append-to-body
    :close-on-click-modal="false" @close="close">
    <div class="top">
      <div class="top-left">
        <el-button class="js_common_btn" @click="init" :disabled="initing">模板初始化</el-button>
        <el-button class="js_common_btn" @click="importBtn">配置导入</el-button>
      </div>
    </div>
    <div class="content">
      <div class="left"></div>
      <div class="right">
        <EasyTable :tableData="tableData" :colsData="colsData" :actions="actions" :tableLoading="tableLoading">
        </EasyTable>
      </div>
    </div>
    <div v-if="showFooter" slot="footer" class="dialog-footer">
      <el-button type="primary" @click="confirm">确 定</el-button>
      <el-button @click="close">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import EasyTable from "./EasyTable";
import * as api from "@/api/myApi/yc_yuce.js";
export default {
  name: "",
  components: { EasyTable },
  props: {
    deviceCode: {
      type: String,
      default: () => "",
    },
    deviceTypeCode: {
      type: String,
      default: () => "",
    },
    type: {
      type: String,
      default: () => "",
    },
    showFooter: {
      type: Boolean,
      default: () => false,
    },
  },
  data() {
    return {
      dialogVisible: false,
      time: [],
      tableData: [],
      colsData: [
        {
          label: "设备名称",
          prop: "deviceName",
        },
        {
          label: "设备编码",
          prop: "deviceCode",
        },
        {
          label: "设备类型",
          prop: "deviceType",
          width: 90,
          align: "center",
        },
        {
          label: "预测模型名称",
          prop: "modelList",
          width: 300,
        },
        {
          label: "预测模型类型",
          prop: "modelType",
        },
        {
          label: "模型创建日期",
          prop: "modelTime",
          width: 160,
          align: "center",
        },
      ],
      actions: [
        {
          name: "删除",
          icon: "el-icon-delete",
          action: "delete",
        },
      ],
      tableLoading: false,
      initing: false,
    };
  },
  methods: {
    init() {
      this.tableLoading = true;
      this.initing = true;
      console.log(this.deviceCode);
      api
        .findDeviceModelByDeviceCode({
          deviceCode: this.deviceCode ? this.deviceCode : null,
        })
        .then((res) => {
          // console.log(res);
          this.tableData = res.data;
        })
        .finally(() => {
          this.tableLoading = false;
          this.initing = false;
        });
    },
    importBtn() {
      let tmp = this.tableData.filter((item) => item.modelId);
      console.log(tmp);
      if (tmp.length == 0) {
        this.$modal.msgWarning("请先配置预测模式");
        return;
      }

      api
        .ForecastDeviceConfig(
          tmp.map((item) => {
            return { deviceCode: item.deviceCode, modelId: item.modelId };
          })
        )
        .then((res) => {
          if (res.code == 200) {
            this.$modal.msgSuccess(res.msg);
            this.$emit("syncData", tmp);
            this.close();
          }
        });
    },
    confirm() {
      this.$emit("confirm");
    },
    close() {
      this.dialogVisible = false;
      this.$emit("close");
    },
  },
  created() {
    setTimeout(() => {
      this.dialogVisible = true;
    }, 50);
  },
  mounted() {
    this.init();
  },
};
</script>
<style lang="scss" scoped>
.top {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 20px;
}

.content {
  // height: 400px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .left {}

  .right {
    width: 100%;

    // height: 100%;
    .no_data {
      width: 100%;
      height: 400px;
      border: 1px solid #2e82af;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      color: #cbcbcb;
    }
  }
}

.bottom {
  margin-top: 20px;
  display: flex;

  span.title {
    width: 160px;
    margin-right: 20px;
    color: #fff;
    font-size: 16px;
  }
}

::v-deep .el-form--inline .el-form-item {
  margin-bottom: 0;
}
</style>
